<template>
    <div class="common-page">
        <div class="common-tabs">
            <div @click="changeTab(0)" class="common-tabs-child" :class="{active: currentTab === 0}">首页</div>
            <div @click="changeTab(1)" class="common-tabs-child" :class="{active: currentTab === 1}">普通高校招生</div>
            <div @click="changeTab(2)" class="common-tabs-child" :class="{active: currentTab === 2}">志愿填报</div>
            <div @click="changeTab(3)" class="common-tabs-child" :class="{active: currentTab === 3}">详情页面-1</div>
            <div @click="changeTab(4)" class="common-tabs-child" :class="{active: currentTab === 4}">详情页面-2</div>
            <div @click="changeTab(5)" class="common-tabs-child" :class="{active: currentTab === 5}">详情页面-3</div>
            <div @click="changeTab(6)" class="common-tabs-child" :class="{active: currentTab === 6}">详情页面-4</div>
            <div @click="changeTab(7)" class="common-tabs-child" :class="{active: currentTab === 7}">详情页面-5</div>
            <div @click="changeTab(8)" class="common-tabs-child statistics-tab" :class="{active: currentTab === 8}">点击量统计：4000</div>
        </div>
        <home-component v-if="currentTab === 0"></home-component>
        <school-component v-if="currentTab === 1"></school-component>
        <wish-component v-if="[2,3,4,5,6,7].includes(currentTab)"></wish-component>
        <statistics-component v-if="currentTab === 8"></statistics-component>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import HomeComponent from './components/home.vue'
import SchoolComponent from './components/school.vue'
import WishComponent from './components/wish.vue'
import StatisticsComponent from "./components/statistics.vue";
const currentTab = ref(0)
function changeTab(index) {
    currentTab.value = index
}
</script>

<style scoped lang="less">
.common-tabs{
    display: flex;
    .statistics-tab {
        margin-left: auto;
    }
}
</style>
